<template>
  <ui-page class="container">
    <div v-for="chart in chartTypes" :key="chart.ref" class="chart-item">
      <div class="chart-item-title">{{ chart.name }}</div>
      <div class="chart-item-chart">
        <v-chart :chart="chart.ref" :data="getChartData(chart)"/>
      </div>
    </div>
  </ui-page>
</template>

<script>
import ChartData from '@/assets/data/chart.json';


export default {
  name: "ComponentsChart",
  data() {
    return {
      chartTypes: [
        {name: '基础柱状图', ref: 'bar-basic', data: {}},
        {name: '堆叠柱状图', ref: 'bar-basic-stack', data: {}},
        {name: '基础柱状图统计', ref: 'bar-basic-statistics', data: {}},
        {name: '堆叠柱状图混合折线图', ref: 'bar-stack-line', data: {}},
        {name: '带圆角的柱状图', ref: 'bar-basic-radius', data: {}},
        {name: '渐变柱状图', ref: 'bar-basic-gradient', data: {}},
        {name: '带名称的排名柱状图', ref: 'bar-rank-name', data: {}},
        // {name: '带背景的柱状图', ref: 'bar-basic-background', data: {}},
        {name: 'B0001', ref: 'B0001', data: {}},
        {name: 'B0002', ref: 'B0002', data: {}},
        {name: 'B0003', ref: 'B0003', data: {}},
        {name: 'B0004', ref: 'B0004', data: {}},
        {name: 'B0005', ref: 'B0005', data: {}},
        {name: 'B0006', ref: 'B0006', data: {}},
        {name: 'B0008', ref: 'B0008', data: {}},
        {name: 'B0009', ref: 'B0009', data: {}},
        {name: 'B0010', ref: 'B0010', data: {}},
        {name: 'B0011', ref: 'B0011', data: {}},
        {name: 'B0012', ref: 'B0012', data: {}},
        {name: 'B0013', ref: 'B0013', data: {}},
        {name: 'B0014', ref: 'B0014', data: {}},
        {name: 'B0015', ref: 'B0015', data: {}},
      ],
    }
  },
  beforeDestroy() {

  },
  methods: {
    getChartData(chart) {
      if(chart.ref=='B0004'){
        return {data:ChartData[chart.ref],title:'阅读次数统计'}
      }else if(chart.ref=='B0005'){
        return {data:ChartData[chart.ref],title:'能耗用量统计(L/Kwh)'}
      }else if(chart.ref=='B0006'){
        return {data:ChartData[chart.ref],title:'费用统计(元)'}
      }else if(chart.ref=='B0008'){
        return {data:ChartData[chart.ref],title:'费用统计(元)'}
      }else if(chart.ref=='B0010') {
        return {data:ChartData[chart.ref]}
      }else if(chart.ref=='B0014'){
        return {data:ChartData[chart.ref]}
      }else{
        return ChartData[chart.ref]
      }

    },
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .chart-item {
    width: 360px;
    height: 250px;
    margin: 20px;
    background: #e5e5e5;
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .chart-item-title {
      text-align: center;
      line-height: 30px;
      color: #000;
    }

    .chart-item-chart {
      flex: 1;
    }
  }
}
</style>
